<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CollegeDec from '@/pages/college/collegeDetail/college-dec.vue'
import CollegePostgraduate from '@/pages/college/collegeDetail/college-postgraduate.vue'
import CollegeEmploy from '@/pages/college/collegeDetail/college-employ.vue'
import CollegeRecruit from '@/pages/college/collegeDetail/college-recruit.vue'

const { initPageId } = defineProps({
  initPageId: {
    type: Number,
    default: 0,
  },
})

const collegeList = ref<[]>([])

const guipage = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
onLoad(() => {
  collegeList.value = []

  setTimeout(() => {
    // 对演示数据随机刷新模拟数据刷新
    // guipage.value.stoploadmore()
  }, 200)
})

onMounted(() => {
  pageId.value = initPageId
})

interface Tag {
  name: string
  id: number | string
}

const tagList = ref<Tag[]>([
  {
    id: 0,
    name: '重庆 重庆市',
  },
  {
    id: 1,
    name: '公办 普通本科',
  },
])

const pageId = ref<number>(0)
const changePage = (e) => {
  console.log(e)
  pageId.value = e
}
</script>

<template>
  <gui-page
    ref="guipage"
    :api-loading-status="apiLoadingStatus"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
    @loadmorefun="getNews"
    @reload="reload"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">根据大学选科</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>

    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column wh100p" style="background-color: #f6f6f6; box-sizing: border-box">
        <view class="flex flex-column flex-center" style="padding: 20rpx 20rpx; background-color: #fdf8f6; height: 150rpx">
          <view class="flex gap12 column-center" style="">
            <view class="flex-center" style="">
              <img src="#" style="border-radius: 50%; border: #9e9e9e solid 1rpx; width: 70rpx; height: 70rpx" />
            </view>
            <view class="flex-column">
              <view class="flex gap18" style="">
                <view class="flex gap18">
                  <view class="flex-column flex-center gap8">
                    <text class="" style="color: #537bb6; font-size: 28rpx">重庆医科大学</text>
                    <text class="gui-color-gray" style="color: #537bb6; font-size: 22rpx">重庆 重庆市|公办</text>
                  </view>
                  <text class="gui-icons gui-block gui-color-gray gui-text" style="margin-top: 4rpx">&#xe645;</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="flex-column gui-flex1 bgfff" style="padding: 10rpx 0; box-sizing: border-box; font-size: 28rpx">
          <view class="w100p flex-between gui-border-b" style="padding: 10rpx; box-sizing: border-box">
            <view class="flex gui-color-gray font12" style="width: 50%">专业名</view>
            <view class="flex gui-color-gray font12" style="width: 50%">选科</view>
          </view>
          <view class="gui-flex1 relative">
            <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="padding: 10rpx 0">
              <view
                v-for="(item, index) in 12"
                class="flex column-center"
                style="padding: 40rpx 20rpx; border-bottom: #f1f1f1 2px solid; height: 50rpx"
              >
                <view class="flex font12" style="width: 50%">临床医学</view>
                <view class="flex gui-color-gray font12" style="width: 50%">物理、化学、生物、历史、地理</view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.college-img {
  width: 100%;
  height: 300rpx;
  background-color: aqua;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}
</style>
